<template>
	<view class="content">
		<view class="top-search">
			<picker :value="UserFrom.userIndex" :range="UserFrom.userData.map(item => item.km)"
				@change="bindPickerChange">
				<view>{{"距离: " + UserFrom.userData[UserFrom.userIndex].km}}</view>
			</picker>
			<view class="btn" @click="getList()">
				搜索
			</view>
		</view>
		<view class="list-content">
			<view class="list-item" v-for="(item,i) in listData" @click="gotoJiaruView(item.pipei_id)" :key="i">
				<view class="title-box">
					<view class="title">
						{{item.chang_guan + '  ' + item.chang_di}}
					</view>
					<view class="renshu">
						组队人数:{{item.duiyou_shuliang}}
					</view>
				</view>
				<view class="name-box">
					<view class="name">
						队伍名称:
					</view>
					<view class="namespace">
						{{item.name}}
					</view>
				</view>
				<view class="center-box">

					<view class="ui-imgs">
						<view class="img-box" v-for="(item2,i2) in item.duiyou_shuliang" :key="i2">
							
							<image class="img"
								v-if="item.duiyuan_list[i2] && item.duiyuan_list[i2].tou_xiang!= ''"
								:src="base64Img(item.duiyuan_list[i2].tou_xiang)">
								1
							</image>
							<image class="img"
								v-if="item.duiyuan_list[i2] && item.duiyuan_list[i2].tou_xiang== ''"
								src="../../../static/minilogo.png">
								2
							</image>




							<image class="img" v-if="!item.duiyuan_list[i2]" src="@/static/nojiaruuser.png">
							</image>
						</view>
					</view>
					<view class="right-day">
						<view class="start-time">
							{{dayTimeReact(item.start_time)}}
						</view>
						<view class="end-time">
							{{dayTimeReact(item.end_time)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btn-once-box" v-if="UserFrom.ifViewBtn">
			<view class="btn" @click="getList()">
				点击获取组队信息
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		jiaruDuiwu
	} from '@/api/mine_api.js'
	import {
		onShow,
		onLoad,
	} from '@dcloudio/uni-app'
	import {
		base64Img
	} from '@/tools/tools.js'


	const UserFrom = reactive({
		longitude: '',
		latitude: '',
		userIndex: 0,
		userData: [{
				km: '2km',
				num: 2
			},
			{
				km: '5km',
				num: 5
			},
			{
				km: '10km',
				num: 10
			}
		],
		kmData: 2,
		openid: '',
		ifViewBtn: true
	})

	const listData = ref([])
	// 搜索
	const bindPickerChange = (e) => {

		UserFrom.userIndex = e.detail.value
		UserFrom.kmData = UserFrom.userData[e.detail.value].num
	}

	// 日期格式化
	const dayTimeReact = (tiem) => {
		const [datePart, timePart] = tiem.split(' '); // 按空格分割日期和时间部分

		// 处理日期部分
		const [year, month, day] = datePart.split('-').map(Number);

		// 处理时间部分
		const [hours, minutes] = timePart.split(':').map(Number);

		// 格式化为你想要的格式：11月8日 12:00
		const formattedDate = `${month}月${day}日 ${hours}:${minutes < 10 ? '0' + minutes : minutes}`;

		return formattedDate;
	}


	// 获取列表
	const getList = () => {

		uni.showLoading({
			title: '加载中'
		});

		let data = {
			longitude: 36.660925,
			latitude: 119.23101,
			distance: UserFrom.kmData,
			openid: UserFrom.openid
		}

		uni.getFuzzyLocation({
			type: 'wgs84',
			success(res2) {
				UserFrom.longitude = res2.longitude
				UserFrom.latitude = res2.latitude
				// let data = {
				// 	longitude: res2.longitude,
				// 	latitude: res2.latitude,
				// 	distance: UserFrom.kmData,
				// 	openid: UserFrom.openid
				// }

				jiaruDuiwu(data).then((res) => {
					console.log(res);
					listData.value = res.result
					UserFrom.ifViewBtn = false
					uni.hideLoading();
				})
			}
		})
		jiaruDuiwu(data).then((res) => {
			console.log(res);
			listData.value = res.result
			UserFrom.ifViewBtn = false
			uni.hideLoading();
		})
	}

	// 跳转加入组队页面
	const gotoJiaruView = (id) => {
		uni.redirectTo({
			url: `/pages/mine/zuiduiviews/jiaru-team-view?id=${id}`
		})
	}

	onLoad((res) => {
		console.log(res);

		uni.getStorage({
			key: 'openid',
			success(res2) {
				UserFrom.openid = res2.data.openid
			}
		})
	})
</script>

<style lang="scss" scoped>
	.content {
		min-height: calc(100vh - 200rpx);
		background: linear-gradient(to bottom, rgba(135, 213, 255, 1) 0%, rgba(211, 211, 211, 0.58) 42%, rgba(211, 211, 211, 0) 100%);
		padding: 20rpx;
		position: relative;

		.top-search {
			display: flex;
			padding: 20rpx;
			border-radius: 20rpx;
			background-color: white;
			justify-content: space-between;
		}

		.list-content {

			.list-item {
				margin-top: 20rpx;
				padding: 20rpx;
				background-color: white;
				border-radius: 20rpx;

				.title-box {
					font-size: 26rpx;
					font-weight: 400;
					display: flex;
					justify-content: space-between;


				}

				.name-box {
					display: flex;

					.name {
						margin-right: 20rpx;
					}
				}

				.center-box {
					margin-top: 20rpx;
					display: flex;
					justify-content: space-between;
					width: 100%;

					.ui-imgs {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;

						.renshu {
							margin-right: 20rpx;
						}

						.img-box {
							.img {
								margin-right: 20rpx;
								width: 80rpx;
								height: 80rpx;
								border-radius: 20rpx;
							}
						}
					}

					.right-day {
						padding-top: 20rpx;
					}
				}
			}
		}

		.btn-once-box {
			text-align: center;
			height: calc(100vh - 340rpx);
			display: flex;
			flex-direction: column;
			justify-content: center;

			.btn {
				padding: 40rpx;
				background-color: white;
				border-radius: 20rpx;
			}
		}

	}
</style>